<template>
	<div @click.stop="onClickHandler" :componentModel="componentModel" class="form-designer-page">
		<i class="el-icon-s-grid" style="position: absolute;left: 0px;top:0px;z-index: 100;color: aqua;" @click.stop="onClickHandler"></i>
		<slot></slot>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	import formDesignerUtil from '@/utils/formDesignerUtil.js';
	export default {
		name: "DesignPageComponent",
		props: ["componentModel"],
		data() {
			return {
				"propertySet": [
					{
						"key": "ID","label":"ID","editor":"label",
					},{
						"key": "pageCode","label":"页面编码","editor":"label",
					},{
						"key": "title","label":"标题","editor":"text",
					},{
						"key": "pageBean","label":"PageBean","editor":"text",
					},{
						"key": "cssStyleExpression","label":"cssStyle","editor":"textarea",
					},{
						"key": "cssClassExpression","label":"cssClass","editor":"textarea",
					},{
						"key": "pageContext","label":"页面上下文","editor":"textarea",
					}
				]
			}
		},
		inject:['children'],
		mounted() {
			this.children.push(this);
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			onClickHandler(){
				formDesignerUtil.mobileComponentClickHandler(this);
			},getPropertyValue(propertyKey){
				if (propertyKey == "ID") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"id");
				}
				return formDesignerUtil.getComponentModelCommonValue(this.componentModel,propertyKey);
			},setPropertyValue(propertyKey,propertyValue){
				formDesignerUtil.setComponentModelCommonValue(this.componentModel,propertyKey, propertyValue);
			},setSelected(){
				
			}
		},
	}
</script>

<style>
	
</style>
